From 992e40835af1600a0961ec2454fb78ff43aec3c6 Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Mon, 7 Sep 2026 22:31:23 +0200
Subject: Add routine archives: archive date, searchable archived list, frozen
 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Stamp archived_at on the archived snapshot; copy it on edit
- loadArchived(projectId) + collapsible fuzzy-searched "Archivées" section on the project page
- Archived routine pages open read-only with the health chart ending at the archive date; edit/complete actions reject archived routines
---
 .../[projectId]/routine/[routineId]/+page.svelte   | 186 ++++++++++++---------
 1 file changed, 106 insertions(+), 80 deletions(-)

(limited to 'src/routes/projects/[projectId]/routine/[routineId]/+page.svelte')

diff --git a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
index d57ed79..5f57de4 100644
--- a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
+++ b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
@@ -42,8 +42,14 @@
 		year: 'numeric',
 	});
 
+	const frozenAt = $derived(
+		data.routine.archived
+			? Date.parse(data.routine.archivedAt ?? data.routine.createdAt)
+			: Date.now(),
+	);
+
 	const series = $derived(
-		computeHealthSeries(data.routine, data.completions, Date.now()),
+		computeHealthSeries(data.routine, data.completions, frozenAt),
 	);
 
 	const PAD = 10;
@@ -93,65 +99,76 @@
 		<span class={scoreClass(data.state.health)}>{data.state.health}</span>
 	</header>
 
-	<form
-		class="form-card"
-		method="POST"
-		action="?/edit"
-		use:enhance={() => {
-			return async ({ result, update }) => {
-				await update({ reset: false });
-			};
-		}}
-	>
-		{#if form?.error}
-			<p class="error">{form.error}</p>
-		{/if}
-		<label>
-			<span class="form-label">Nom</span>
-			<input
-				class="form-input"
-				type="text"
-				name="name"
-				bind:value={name}
-				autocomplete="off"
-			/>
-		</label>
-		<label>
-			<span class="form-label">Intervalle</span>
-			<input
-				class="form-input frequency"
-				class:input-invalid={frequency !== '' && frequencyDays === null}
-				type="text"
-				name="frequencyDays"
-				bind:value={frequency}
-				placeholder="2w"
-				autocomplete="off"
-				aria-label="Intervalle (ex: 1d, 2w, 3m)"
-			/>
-		</label>
-		<label>
-			<span class="form-label">Description</span>
-			<textarea
-				class="form-input desc"
-				name="description"
-				bind:value={description}
-				rows={3}
-				placeholder="Pourquoi, comment, quand..."
-				autocomplete="off"
-			></textarea>
-		</label>
-		{#if frequency !== '' && frequencyDays === null}
-			<p class="error">Intervalle invalide — ex : 1d, 2w, 3m, 1y</p>
-		{/if}
-		<button
-			class="btn-primary"
-			type="submit"
-			disabled={!name.trim() || frequencyDays === null}
+	{#if data.routine.archived}
+		<p class="archived-badge">
+			Archivée le
+			{dateTimeFormatter.format(
+				new Date(data.routine.archivedAt ?? data.routine.createdAt),
+			)}
+		</p>
+	{/if}
+
+	{#if !data.routine.archived}
+		<form
+			class="form-card"
+			method="POST"
+			action="?/edit"
+			use:enhance={() => {
+				return async ({ result, update }) => {
+					await update({ reset: false });
+				};
+			}}
 		>
-			Enregistrer
-		</button>
-		<p class="save-status" class:visible={saved}>✓ Enregistré</p>
-	</form>
+			{#if form?.error}
+				<p class="error">{form.error}</p>
+			{/if}
+			<label>
+				<span class="form-label">Nom</span>
+				<input
+					class="form-input"
+					type="text"
+					name="name"
+					bind:value={name}
+					autocomplete="off"
+				/>
+			</label>
+			<label>
+				<span class="form-label">Intervalle</span>
+				<input
+					class="form-input frequency"
+					class:input-invalid={frequency !== '' && frequencyDays === null}
+					type="text"
+					name="frequencyDays"
+					bind:value={frequency}
+					placeholder="2w"
+					autocomplete="off"
+					aria-label="Intervalle (ex: 1d, 2w, 3m)"
+				/>
+			</label>
+			<label>
+				<span class="form-label">Description</span>
+				<textarea
+					class="form-input desc"
+					name="description"
+					bind:value={description}
+					rows={3}
+					placeholder="Pourquoi, comment, quand..."
+					autocomplete="off"
+				></textarea>
+			</label>
+			{#if frequency !== '' && frequencyDays === null}
+				<p class="error">Intervalle invalide — ex : 1d, 2w, 3m, 1y</p>
+			{/if}
+			<button
+				class="btn-primary"
+				type="submit"
+				disabled={!name.trim() || frequencyDays === null}
+			>
+				Enregistrer
+			</button>
+			<p class="save-status" class:visible={saved}>✓ Enregistré</p>
+		</form>
+	{/if}
 
 	<h2 class="section-title">Santé</h2>
 	<div class="form-card chart-card">
@@ -197,27 +214,29 @@
 	</div>
 
 	<h2 class="section-title">Historique</h2>
-	<form
-		class="form-card form-card--compact add-completion"
-		method="POST"
-		action="?/complete"
-		use:enhance={() => {
-			return async ({ update }) => {
-				note = '';
-				await update({ reset: false });
-			};
-		}}
-	>
-		<input
-			class="form-input"
-			type="text"
-			name="note"
-			bind:value={note}
-			placeholder="Note (optionnel)"
-			autocomplete="off"
-		/>
-		<button class="btn-done" type="submit">Fait</button>
-	</form>
+	{#if !data.routine.archived}
+		<form
+			class="form-card form-card--compact add-completion"
+			method="POST"
+			action="?/complete"
+			use:enhance={() => {
+				return async ({ update }) => {
+					note = '';
+					await update({ reset: false });
+				};
+			}}
+		>
+			<input
+				class="form-input"
+				type="text"
+				name="note"
+				bind:value={note}
+				placeholder="Note (optionnel)"
+				autocomplete="off"
+			/>
+			<button class="btn-done" type="submit">Fait</button>
+		</form>
+	{/if}
 
 	<ul class="item-list">
 		{#each data.completions as c (c.id)}
@@ -305,6 +324,13 @@
 		border-left: 3px solid var(--accent);
 	}
 
+	.archived-badge {
+		margin: 0 0 1rem;
+		color: var(--text-secondary);
+		font-size: 0.875rem;
+		font-weight: 500;
+	}
+
 	.chart-card {
 		align-items: stretch;
 	}
-- 
cgit v1.3